<!--职业安全管理现状普查表模版-->
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
          <FormItem label='审计类型：'>
            <Select class="query-form-el" v-model="dataToQuery.auditType">
              <Option value="1">基础标准</Option>
              <Option value="2">现场标准</Option>
              <Option value="3">班组标准</Option>
            </Select>
          </FormItem>
        </Col>


        <Col span="8" offset="8" v-if="!switchFlag">
          <!--          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='隐患分类：'>
            <Cascader :data="areaTree" v-model="dataToQuery.dangerSortArr" change-on-select :transfer="true"
                      @on-change="(value,selectedData)=>{$set(dataToQuery,'dangerSort',value.join(','))}"></Cascader>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='整改责任人：' prop='persionHeld'>
            <Input class='' placeholder="请填写整改责任人" type='text' v-model='dataToQuery.persionHeld'></Input>
          </FormItem>
        </Col>


      </Row>
      <Row v-show="switchFlag" class="query-form">

        <Col span="8" :offset="16">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <Button size="large" class="ivu-btn-add" icon="md-home" @click="back">返回</Button>
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading ||  pageStatus.baseLoading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :mask-closable="false" :title="mode == 'view' ?'审计亮点详情':'审计亮点'" :transfer=false v-model="dialogShow"
           v-if="dataToView && dialogShow"
           :width=700 :styles="{height:'500px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dataToView" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='审计类型：' prop='auditType'>
                  <div v-if="mode === 'view'">{{ renderAuditTypeView(dataToView.auditType) }}</div>
                  <Select v-else class="query-form-el" v-model="dataToView.auditType">
                    <Option value="1">基础标准</Option>
                    <Option value="2">现场标准</Option>
                    <Option value="3">班组标准</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='加分项：' prop='bonusItem'>
                  <div v-if="mode === 'view'">{{ dataToView.bonusItem }}</div>
                  <Input v-else class='' placeholder="请填写加分项" type='text' v-model='dataToView.bonusItem'></Input>
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">

              <Col span="23">
                <FormItem label='亮点描述：' prop='auditDesc'>
                  <div v-if="mode === 'view'">{{ dataToView.auditDesc }}</div>
                  <Input v-else class='' placeholder="请填写亮点描述" type='textarea' v-model='dataToView.auditDesc'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="亮点图片：">
                  <img style="width:50px;height:50px;" :src="fileUrl + '/file/' + fileId"
                       v-for="fileId in dataToView.filesId" @click="handleViewImg(fileUrl + '/file/' + fileId)">
                </FormItem>
                <FormItem v-else label="亮点图片：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id','picture/auditBright') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            :format="['jpg','jpeg','png']"
                            accept="image/jpeg,image/jpg,image/png"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id','picture/auditBright')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">

              <Col span="11">
                <FormItem label='创建人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else class='' readonly placeholder="请填写创建人" type='text'
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='创建时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else class="w" readonly placeholder="请选择创建时间"
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>


          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dataToView')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

    <Modal title="图片查看" v-model="visible">
      <img :src="viewUrl" style="width: 100%">
      <div slot="footer">
        <Button @click="visible=false" class='ivu-btn-save'>关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import pageCommonFunction from '@/components/pageCommonFunction.js'


var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  components: {
    cascaderDom
  },
  data() {
    return {
      ...this.createCommonDataField(),
      viewUrl: "",
      visible: false,
      switchFlag: false,
      uploadFile: null,
      buttonLoading1: false,
      importModal: false,
      reason: false,
      token: sessionStorage('token').get('Authorization'),
      user: sessionStorage('userId').getObject('userId'),
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'auditType', title: '审计类型', align: 'center', minWidth: 120, render: this.renderAuditType},
        {key: 'bonusItem', title: '加分项', align: 'center', minWidth: 120},
        {key: 'auditDesc', title: '亮点描述', align: 'center', minWidth: 120, tooltip: true},
        {key: 'createUserName', title: '创建人', align: 'center', minWidth: 100},
        {key: 'createDate', title: '创建时间', align: 'center', minWidth: 80, render: this.renderCellDate},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {
            if (this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined) {
              return h('div', [

                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px',},
                  on: {
                    click: () => {
                      this.viewData(params);
                    }
                  }
                }, '详情'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  disabled: true,
                  style: {fontSize: '14px'},
                  on: {
                    click: () => {
                      this.editData(params);
                    }
                  }
                }, '修改'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: 'red'},
                  on: {
                    click: () => {
                      this.deleteData(params);
                    }
                  }
                }, '删除')
              ]);
            } else {
              return h('div', [
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px',},
                  on: {
                    click: () => {
                      this.viewData(params);
                    }
                  }
                }, '详情'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '修改'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '删除')
              ]);
            }
          }
        }
      ],
      ruleCustom: {
        auditType: [{required: true, message: '请填写审计类型', trigger: 'change',}],
        bonusItem: [{required: true, message: '请填写加分项', trigger: 'change',}],
        auditDesc: [{required: true, message: '请填写亮点描述', trigger: 'change',}],
        createUserName: [{required: true, message: '请填写创建人', trigger: 'change',}],
        createDate: [{required: true, message: '请填写创建时间', trigger: 'change', type: 'date'}],

      },
      tableHeight: 10,
      crectification: [],
      // api
      standardSelectModal: false,
      queryUrl: Api.queryAuditBright,
      deleteUrl: Api.deleteAuditBright,
      updateUrl: Api.updateAuditBright,
      saveUrl: Api.addAuditBright,
      buttonLoading: false,
      dangerModel: false,
    }
  },
  mounted() {
    let _this = this;
    this.dataToQuery = {};
    this.setTableHeight();
    this.query();
  },
  methods: {

    ...pageCommonFunction,
    beforeEditDialogOpen(data) {

    },
    radioCategoryType(data) {

    },
    openDangerModal() {
      this.dangerModel = true;
    },
    selectDanger(row) {
      this.dangerModel = false;
      this.dataToView.dangerId = row.id;
      this.dataToView.dangerName = row.dangerName;
    },
    renderAuditType(h, params) {
      let key = params.column.key;
      if (!params.row[key]) return "";

      if (params.row[key] == '1') {
        return h('span', '基础标准')
      } else if (params.row[key] == '2') {
        return h('span', '现场标准')
      } else if (params.row[key] == '3') {
        return h('span', '班组标准')
      } else {
        return ""
      }

    },

    renderAuditTypeView(data) {

      if (!data) return "";

      if (data == '1') {
        return '基础标准'
      } else if (data == '2') {
        return '现场标准'
      } else if (data == '3') {
        return '班组标准'
      } else {
        return ""
      }

    },
    back() {
      this.$router.push('/auditTwoMission')
    },
    importDanger() {
      this.importModal = true;
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (!this.switchFlag) {
        this.tableHeight = this.tableHeight + 44;

      } else {
        this.tableHeight = this.tableHeight - 44;
      }

    },
    setOrgId(data) {
      this.dataToQuery.companyId = data[data.length - 1];
    },
    setOrgName(data) {

    },
    query() {
      this.dataToQuery.missionId = this.$route.query.missionId;
      this.queryAjax()
    },

    submit(name) {
      this.dataToView.missionId = this.$route.query.missionId;
      this.submitAjax(name);
    },
    afterDataToViewInit() {
      this.getFiles1('id', 'picture/auditBright');
    },
    handleViewImg(url) {
      this.viewUrl = url;
      this.visible = true;
    },
    createEmptyDataToAdd() {
      return {
        id: this.get_uuid(),
        createUserName: this.user.userName,
      }
    },
  },
  watch: {},

}
</script>

<style lang='css' scoped>
@import '../../../index.css';

.importDanger {
  display: inline-block
}
</style>
